<template>
  <el-row
    :gutter="10"
    class="mb-0!"
    :class="[
      footer
        ? '!h-[calc(100vh-var(--top-tool-height)-var(--tags-view-height)-var(--app-footer-height)-10px)]'
        : '!h-[calc(100vh-var(--top-tool-height)-var(--tags-view-height)-20px)]'
    ]"
  >
    <el-col :xs="24" :sm="12" :md="10" :lg="8" :xl="6">
      <User>
        <template #backButton>
          <el-button
            @click="goReturnUrl('cancel')"
            size="large"
            plain
            type="primary"
            class="w-full custom-text-18 !h-50px"
          >
            返回
          </el-button>
        </template>
      </User>
    </el-col>
    <el-col :xs="24" :sm="12" :md="14" :lg="16" :xl="18">
      <div class="pos-relative !h-full">
        <el-row class="!h-full">
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <RecordList :list="list">
              <template #tool>
                <ContentWrap class="!w-full border-none!" :body-style="{ padding: 0 }">
                  <el-row class="!w-full m-x-0!" justify="space-between">
                    <el-col :xs="4" :sm="4" :md="4" :lg="4" :xl="4">
                      <div class="flex items-center !h-full">
                        <el-text truncated class="custom-text-16">提货记录</el-text>
                      </div>
                    </el-col>
                  </el-row>
                  <el-divider border-style="dashed" class="m-y-10px!" />
                  <el-row class="!w-full m-x-0!" justify="space-between">
                    <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
                      <el-row>
                        <el-col
                          :xs="4"
                          :sm="4"
                          :md="4"
                          :lg="4"
                          :xl="4"
                          v-for="(item, index) in state.tabsList"
                          :key="index"
                        >
                          <el-button
                            :type="'primary'"
                            :text="activeIndex != index"
                            class="!w-100%"
                            :class="{ 'color-060606': activeIndex != index }"
                            @click="setActiveIndex(index)"
                          >
                            <div class="text-justify"> {{ item.name }} </div>
                          </el-button>
                        </el-col>
                      </el-row>
                    </el-col>
                    <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
                      <div class="flex justify-end items-center">
                        <el-button class="custom-text-16" @click="handleViewDepositRecord"
                          >新增提货</el-button
                        >
                      </div>
                    </el-col>
                  </el-row>
                </ContentWrap>
              </template>
              <template #bottom>
                <div class="w-100%">
                  <div class="flex items-center justify-between">
                    <Pagination
                      :total="total"
                      v-model:page="queryParams.pageNo"
                      v-model:limit="queryParams.pageSize"
                      @pagination="getDetail()"
                    />
                  </div>
                </div>
              </template>
            </RecordList>
          </el-col>
        </el-row>
      </div>
    </el-col>
  </el-row>
</template>
<script lang="ts" setup>
defineOptions({ name: 'ShopDepositRecird' })
import { useTagsViewStore } from '@/store/modules/tagsView'
import User from '@/views/shop/components/member/user/index.vue'
import RecordList from '@/views/shop/pick/components/RecordList.vue'
import * as PayApi from '@/api/shop/trade/pay'

const appStore = useAppStore()
const footer = computed(() => appStore.getFooter)
// 声明传值
const emit = defineEmits(['activeTab'])

import { useAppStore } from '@/store/modules/app'
const activeIndex = ref(0) //选中的下标
// 定义方法
const setActiveIndex = (index: number) => {
  activeIndex.value = index
  let activeTab = state.tabsList[index]
  queryParams.value.orderBy = activeTab.value
} //设置选中的tab下标
/** 密码键盘信息 */

const route = useRoute() // 路由
const { push, currentRoute } = useRouter() // 路由
const { delView } = useTagsViewStore() // 视图操作

const returnUrl = ref<string | undefined>(undefined) // 支付完的回调地址
const state = reactive({
  checkList: [] as any,
  tabsList: [
    {
      name: '综合排序',
      value: '0'
    },
    {
      name: '时间排序',
      value: '1'
    },
    {
      name: '商品排序',
      value: '2'
    }
  ]
})
/** 门店会员信息 */
import { useShopUserStoreWithOut } from '@/store/modules/shop/user'
const shopUserStore = useShopUserStoreWithOut()

const shopUser = computed(() => {
  return shopUserStore.getUser
})
const queryParams = ref({
  pageNo: 1,
  pageSize: 10,
  userId: computed(() => {
    return shopUser.value.id
  }),

  reserveType: 2,
  spuName: undefined as any
}) // 查询参数 (给组件传值)
const list = ref()
const total = ref()
/** 获得信息 */
const getDetail = async () => {
  const data = await PayApi.orderReserveList(queryParams.value)
  list.value = data.list
  total.value = data.total
}

/**
 * 回到业务的 URL
 *
 * @param payResult 支付结果
 *                  ① success：支付成功
 *                  ② cancel：取消支付
 *                  ③ close：支付已关闭
 */
const goReturnUrl = (payResult) => {
  // 未配置的情况下，只能关闭
  if (!returnUrl.value) {
    delView(unref(currentRoute))
    return
  }

  const url =
    returnUrl.value.indexOf('?') >= 0
      ? returnUrl.value + '&payResult=' + payResult
      : returnUrl.value + '?payResult=' + payResult
  // 如果有配置，且是 http 开头，则浏览器跳转
  if (returnUrl.value.indexOf('http') === 0) {
    location.href = url
  } else {
    delView(unref(currentRoute))
    push({
      path: url
    })
  }
}

const handleViewDepositRecord = () => {
  let path = currentRoute.value.path

  push({
    name: 'ShopPick',
    query: {
      returnUrl: encodeURIComponent(path)
    }
  })
}
/** 初始化 */
onMounted(() => {
  if (route.query.returnUrl) {
    returnUrl.value = decodeURIComponent(route.query.returnUrl as string)
  }

  getDetail()
})
</script>
